<template>
  <div class="cargoWayManage">
    <c-title :hide="false" text="货道管理"></c-title>
    <div class="listBox" v-if="record.length > 0">
      <div class="list" v-for="(item, ind) in record" :key="ind">
        <div class="title">
          <div class="tltle_left">货道：{{ item.name }}</div>
          <div class="title_right">
            <span class="title_right" v-if="item.goods" @click="cleanCargo(item.id)">清空货道</span>
            <span class="title_right" style="color:#f15353;margin-left:0.625rem;" @click="openCargo(item.id)">打开柜门</span>
          </div>
        </div>
        <template v-if="item.goods">
          <div class="goods">
            <div class="goods_img">
              <img :src="item.goods.thumb" alt="" />
            </div>
            <div class="goods_right">
              <div class="topBox">
                <div class="title">{{ item.goods.title }}</div>
                <div class="statusTag" :class="[item.status == 0 ? 'dc' : '']">{{ item.status_name }}</div>
              </div>
              <div class="price">¥{{ item.goods.price }}</div>
            </div>
          </div>
          <div class="btn">
            <div class="btn_b mg" v-if="item.status" @click="cargoUpdate('down', item)">下架商品</div>
            <div class="btn_b mg" v-if="item.goods && item.status == 0" @click="searchGoodBox('', item.id)">更换商品</div>
            <div class="btn_a mg" v-if="item.status == 0" @click="cargoUpdate('up', item)">上架商品</div>
          </div>
        </template>
        <div class="addGood" @click="searchGoodBox('', item.id)" v-if="!item.goods">
          <i class="iconfont icon-all_inforelease"></i>
          选择商品
        </div>
      </div>
    </div>
    <van-empty image="search" description="暂无更多" v-else />
    <van-popup v-model="show" position="bottom" :style="{ height: '22.94rem' }" round>
      <div class="navBox">
        <i class="iconfont icon-member-left" @click="closeShow"></i>
        <div class="searchBox">
          <van-search v-model="searchVal" placeholder="搜索商品标题" shape="round">
            <template #left-icon>
              <i class="iconfont icon-all_search_2"></i>
            </template>
          </van-search>
        </div>
        <span class="txt" @click="toSearch">搜索</span>
      </div>
      <div class="listGood" v-if="searchGood.data">
        <div class="lis" :class="searchGood.data.length - 1 == index ? 'las' : ''" v-for="(item, index) in searchGood.data" :key="index" @click="selectGoodTap(item.id)">
          <div class="image">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="detail">
            <div class="detail_left">
              <div class="name">{{ item.title }}</div>
              <div class="price">￥{{item.price}}</div>
            </div>
            <div class="detail_right">
              <img v-if="selectGoodId == item.id" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FtrainingCourse%2Fselect%402x.png" alt="" />
            </div>
          </div>
        </div>
        <div class="moreTxt" @click="tapMore" v-if="searchGood.current_page < searchGood.last_page">点击加载更多</div>
        <div class="moreTxt" @click="tapMore" v-else>没有更多了</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      show: false,
      searchVal: "",
      action: [], //api数组
      record: [],
      searchGood: [], //搜索的货道商品
      selectGoodId: "",
      cargoId: "",

      page: 1,
      isLoadMore: true,
      last_page: 1,
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.isLoadMore = true;
      this.last_page = 1;
      this.action = [];
      this.record = [];
      this.show = false;
      this.searchVal = "";
      this.searchGood = [];
      this.cargoId = "";
    },
    toSearch() {
      this.searchGood = [];
      this.searchGoodBox();
    },
    closeShow() {
      this.searchGood = [];
      this.selectGoodId = "";
      this.show = false;
    },
    selectGoodTap(gid) {
      this.selectGoodId = gid;
      this.show = false;
      this.searchGood = [];
      this.addCargo();
    },
    tapMore() {
      this.searchGoodBox("more");
    },
    // 情况货道
    cleanCargo(cargoId) {
      let urlstr = "plugin.gradevin.frontend.owner.cargo-road.clear";
      $http.post(urlstr, { id: cargoId }, "loading").then(response => {
        if (response.result == 1) {
          this.init();
          this.getData();
        } else {
          this.$toast(response.msg);
        }
      });
    },
    // 货道商品 上下架 请求
    cargoChange(json) {
      let urlstr = "plugin.gradevin.frontend.owner.cargo-road.status";
      $http.post(urlstr, json, "loading").then(response => {
        if (response.result == 1) {
          console.log(response);
          this.init();
          this.getData();
        } else {
          this.$toast(response.msg);
        }
      });
    },
    // 货道商品 上下架 逻辑
    cargoUpdate(key, item) {
      let json = {
        status: 0,
        id: item.id
      };
      console.log(item);
      if (key == "up") {
        json.status = 1;
        this.cargoChange(json);
        return;
      }
      if (key == "down") {
        this.$dialog
          .confirm({ message: `是否确认下架`, confirmButtonText: "确认", cancelButtonText: "取消" })
          .then(() => {
            this.cargoChange(json);
          })
          .catch(() => {});
        return;
      }
    },
    // 货道增加商品列表
    addCargo() {
      let urlstr = "plugin.gradevin.frontend.owner.cargo-road.change";
      $http.post(urlstr, { id: this.cargoId, goods_id: this.selectGoodId }, "loading").then(response => {
        if (response.result == 1) {
          console.log(response.data);
          this.init();
          this.getData();
        } else {
          this.$toast(response.msg);
        }
      });
    },
    // 货道搜索可以添加商品列表
    searchGoodBox(key = "", id = "") {
      if (id) {
        // 货道id
        this.cargoId = id;
      }
      let json = {
        title: this.searchVal
      };
      if (key == "more") {
        if (this.searchGood.current_page >= this.searchGood.last_page) {
          console.log("没有更多了");
          return;
        }
        json.page = this.searchGood.current_page + 1;
      }
      let urlstr = "plugin.gradevin.frontend.owner.cargo-road.goods";
      $http.post(urlstr, json, "loading").then(response => {
        if (response.result == 1) {
          this.show = true;
          if (key == "more") {
            this.searchGood.data = this.searchGood.concat(response.data.data);
            this.searchGood.current_page = json.page;
          } else {
            this.searchGood = response.data;
          }
        } else {
          this.$toast(response.msg);
        }
      });
    },
    openCargo(cid){
      let json = {
        id: cid
      };
      let urlstr = "plugin.gradevin.frontend.owner.cargo-road.open";
      $http.post(urlstr, json, "loading").then(response => {
        if (response.result == 1) {
          this.$toast(response.msg);
        } else {
          this.$toast(response.msg);
        }
      });
    },
    getData() {
      let json = {
        device_id: this.$route.params.device_id
      };
      let urlstr = "plugin.gradevin.frontend.owner.cargo-road.index";
      $http.post(urlstr, json, "loading").then(response => {
        if (response.result == 1) {
          this.action = response.data.action;
          this.record = response.data.record.data;
          this.isLoadMore = true;
          this.total_page = response.data.record.last_page;
          if (!this.total_page) {
            this.total_page = 0;
          }
        } else {
          this.$toast(response.msg);
        }
      });
    },

    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      let json = {
        page: this.page,
        device_id: this.$route.params.device_id
      };
      if (this.page >= this.total_page) {
        this.isLoadMore = false;
        return;
      } else {
        this.isLoading = true;
        this.page = this.page + 1;
        json.page = this.page;
        $http
          .get("plugin.gradevin.frontend.owner.cargo-road.index", json, "加载中")
          .then(response => {
            this.isLoadMore = true;
            if (response.result === 1) {
              this.record = this.record.concat(response.data.record.data);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              return;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cargoWayManage {
  .listGood {
    padding: 0 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.63rem;
    .moreTxt {
      text-align: center;
      margin-top: 1rem;
      color: #aaaab3;
    }
    .lis {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid #ececec;
      overflow: hidden;
      margin-bottom: 0.75rem;
      .image {
        flex-shrink: 0;
        width: 4.38rem;
        height: 4.38rem;
        border-radius: 0.31rem;
        margin-right: 0.38rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.31rem;
        }
      }
      .detail {
        overflow: hidden;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .detail_left {
          flex: 1;
          height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 1rem;
            font-weight: 500;
            width: 100%;
            text-align: left;
          }
          .price {
            font-size: 1rem;
            line-height: 1rem;
            color: #f15353;
            margin-top: 0.8rem;
          }
        }
        .detail_right {
          width: 1rem;
          height: 1rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .las {
      margin-bottom: 0;
      border-bottom: none;
    }
  }
  .navBox {
    display: flex;
    padding: 1.06rem 0.82rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaaab3;
    .txt {
      font-size: 0.94rem;
      color: #333333;
      font-weight: 600;
    }

    .icon-member-left {
      font-size: 1rem;
    }
    .searchBox {
      flex: 1;
      .van-search {
        padding: 0;
      }
      .icon-all_search_2 {
        color: #aaaab3;
      }
    }
  }
  .listBox {
    margin: 0.63rem 0.75rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    .list {
      padding: 0.94rem 0.72rem;
      box-sizing: border-box;
      border-radius: 0.5rem;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 0.63rem;
      .addGood {
        font-size: 0.81rem;
        font-weight: 500;
        color: #f15353;
        padding: 0.59rem 0.72rem;
        border: 1px solid #f15353;
        margin: 0 auto;
        border-radius: 1.88rem;
        background: #FEEDED;
      }
      .btn {
        margin-top: 0.75rem;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        .btn_a {
          border-radius: 1.88rem;
          font-size: 0.81rem;
          background: #f15353;
          color: #fff;
          padding: 0.59rem 0.5rem;
        }
        .btn_b {
          border: 1px solid #aaaab3;
          padding: 0.59rem 0.5rem;
          border-radius: 1.88rem;
          font-size: 0.81rem;
        }
        .mg {
          margin-right: 0.75rem;
        }
        .mg:last-child {
          margin-right: 0;
        }
      }
      .goods {
        flex: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .goods_right {
          flex: 1;
          overflow: hidden;
          box-sizing: border-box;
          .price {
            font-size: 1rem;
            font-weight: bold;
            color: #f15353;
            line-height: 1.13rem;
            text-align: left;
          }
          .topBox {
            display: flex;
            align-items: flex-start;
            .title {
              flex: 1;
              font-size: 0.88rem;
              font-weight: 400;
              text-align: left;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .statusTag {
              margin-left: 0.56rem;
              flex-shrink: 0;
              font-size: 0.75rem;
              padding: 0.19rem 0.34rem;
              color: #fff;
              border-radius: 0.25rem;
              background: #f15353;
            }
            .dc {
              background: #aaaab3;
            }
          }
        }
        .goods_img {
          width: 5.63rem;
          height: 5.63rem;
          border-radius: 0.5rem;
          margin-right: 0.63rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
      }
      .title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.94rem;
        .title_right {
          font-size: 0.81rem;
          font-weight: 400;
          color: #6e6e79;
        }
        .tltle_left {
          font-size: 0.94rem;
          font-weight: 500;
          text-align: left;
        }
      }
    }
  }
}
</style>
